import { useState } from 'react';
import { getData2, selectOptions } from '../Data'
import { useMount, useReactive } from 'ahooks';
import { FlexGrid, FlexGridColumn, FlexGridCellTemplate } from '@grapecity/wijmo.react.grid';
import { Button, Select, InputNumber } from 'antd'

const WijmoF04 = () => {

    const InitData = useReactive({
        init: null,
        item: {},
        copy: {}
    })

    const [Data, setData] = useState()
    useMount(() => { setData(getData2(100)) })

    const init = (init) => {
        InitData.init = init
    }

    const onEdit = (e) => {
        InitData.item = e.item
        InitData.copy = JSON.parse(JSON.stringify(e.item))
    }

    const onDelete = (e) => {
        (InitData.init.collectionView).remove(e.item)
    }

    const onSave = () => {
        InitData.item = {}
    }

    const onCancel = () => {
        Object.keys(InitData.item).forEach(key => InitData.item[key] = InitData.copy[key])
        InitData.item = {}
    }


    if (Data) {
        return (
            <div className="Page">
                <FlexGrid isReadOnly={true} selectionMode="None" headersVisibility="Column" initialized={init} itemsSource={Data}>
                    <FlexGridColumn binding="id" header="ID" width={50} />
                    <FlexGridColumn binding="country" header="Country" isRequired={true} >
                        <FlexGridCellTemplate
                            cellType="Cell"
                            template={e => {
                                return e.item.id === InitData.item.id ? (
                                    <Select options={selectOptions} value={e.item.country} onChange={e => InitData.item.country = e} />
                                ) : e.item.country
                            }}
                        />
                    </FlexGridColumn>
                    <FlexGridColumn binding="sales" header="Sales"  >
                        <FlexGridCellTemplate
                            cellType="Cell"
                            template={e => {
                                return e.item.id === InitData.item.id ? (
                                    <InputNumber value={e.item.sales} onChange={e => InitData.item.sales = e} />
                                ) : e.item.sales
                            }}
                        />
                    </FlexGridColumn>
                    <FlexGridColumn binding="expenses" header="Expenses" format="n2" >
                        <FlexGridCellTemplate
                            cellType="Cell"
                            template={e => {
                                return e.item.id === InitData.item.id ? (
                                    <InputNumber value={e.item.expenses} onChange={e => InitData.item.expenses = e} />
                                ) : e.item.expenses
                            }}
                        />
                    </FlexGridColumn>
                    <FlexGridColumn binding="systemOperation" header="Edit" width={160} >
                        <FlexGridCellTemplate
                            cellType="Cell"
                            template={e => {
                                return e.item.id === InitData.item.id ? (
                                    <div className='systemOperation'>
                                        <Button type='link' onClick={() => onSave(e)}>保存</Button>
                                        <Button type='link' danger onClick={() => onCancel(e)}>取消</Button>
                                    </div>) : (
                                    <div className='systemOperation'>
                                        <Button type='link' onClick={() => onEdit(e)}>修改</Button>
                                        <Button type='link' danger onClick={() => onDelete(e)}>删除</Button>
                                    </div>)
                            }}
                        />
                    </FlexGridColumn>
                </FlexGrid>
            </div>
        )
    }

};

export default WijmoF04;